<template>
  <el-dialog title="送货单打印" :visible.sync='visible' width="70%" :footer="null">
    <div class="Detail">
      <el-button size="small" class="MarginB_20" type="primary" icon="el-icon-printer" @click="Print" style="float:right;">打印</el-button>
      <!-- <button @click="doPrintJB">IE打印</button> -->
      <div ref="print">
        <h3>送货单</h3>
        <el-row>
          <el-col :span="12">
            <div class="col-item">
              <label>客户名称:</label><span>汉纬尔机械(上海)有限公司</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>供应商:</label><span>{{ info.fsupply }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>收货人:</label><span>{{ info.freceiver }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>物流公司:</label><span>{{ info.flogistics }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>联系电话:</label><span>{{ info.fphone }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>快递单号:</label><span>{{ info.fpo }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>收货地址:</label><span>{{ info.faddress }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>送货日期:</label><span>{{ info.ftime }}</span>
            </div>
          </el-col>
        </el-row>
        <table border="0" id="table" style="width: 100%;">
          <thead>
          <tr>
            <th>序号</th>
            <th>物料编号</th>
            <th>物料名称</th>
            <th>型号/规格</th>
            <th>单位</th>
            <th>数量</th>
            <th>订单编号</th>
            <th>备注</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, idx) in printList" :key="idx">
            <td>{{ idx+1 }}</td>
            <td>{{ item.FNumber }}</td>
            <td>{{ item.FName  }}</td>
            <td>{{ item.FModel  }}</td>
            <td>{{ item.funit  }}</td>
            <td>{{ item.fqty  }}</td>
            <td>{{ item.forderbillno  }}</td>
            <td>{{ item.fnote  }}</td>
          </tr>
          </tbody>
        </table>
        <el-row>
          <el-col :span="12">
            <div class="col-item">
              <label>收货人:</label><span></span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-item">
              <label>送货人:</label><span></span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import Print from '../plugs/print'
Vue.use(Print)
export default {
  name: 'DeliveryNoticePrintModal',
  data () {
    return {
      visible: false,
      info: {},
      printList: []
    }
  },
  computed: {
  },
  created () {
  },
  methods: {
    show (id) {
      this.visible = true
      this.getDetail(id)
    },
    doPrintJB () {
      var bdhtml = window.document.body.innerHTML
      var printhtml = window.document.getElementById('table').innerHTML
      window.document.body.innerHTML = printhtml
      window.print()
      window.document.body.innerHTML = bdhtml
      return false
    },
    Print () {
      this.$print(this.$refs.print)
    },
    getDetail (id) {
      this.Http.get('/yw_supplier_user/ywSupplierUser/deliveryPrintList', {id}
      ).then(res => {
        console.log(res)
        if (res.data.success) {
          this.info = res.data.result
          this.printList = res.data.result.entryList
        } else {
          this.$message.error(res.data.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Padding: 24px;
.Detail{
  width: 100%;
  height: 90vh;
  /*
  width: 1000px;
  width: calc(100% - 2*@Padding);
  overflow-x: scroll;
  margin-top: @Padding;
  padding: 0 @Padding;
  */
  overflow-x: scroll;
  background: #fff;
}
th{
  padding:1px;
  height: 20px;
  border-right: 1px solid #999;
  font-weight: normal !important;
  white-space:nowrap;
}
td{
  height: 25px;
  border:0px solid #999;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  font-weight: normal !important;
  white-space:nowrap;
}
table{
  padding:0;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  border:1px solid #999;
}
.col-item {
  display: block;
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: left;
  label {
    display: inline-block;
    width: 30%;
    text-align: right;
  }
  span {
    display: inline-block;
    width: 50%;
    padding: 0 10px;
  }
}
</style>
